import Container from '@icedesign/container';
import React, { Component } from 'react';
import ChartPie from '../ChartPie';
import Img from '@icedesign/img';
import { Pagination, Loading } from '@alifd/next';
import request from '../../../../instances/request';

class EquipmentList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      __loading: true,
      currentPage: 1,
      pageSize: this.props.limit,
      totalCount: 0,
      allCount: 0,
      badCount: 0,
      goodCount: 0,
      badList: [],
      data: [{
        item: '正常设备',
        count: 0,
      }, {
        item: '故障设备',
        count: 0,
      }],
    }
  }

  async getEquipmentState() {
    let res = await request.post('/dashboard/equipmentState', {
      page: this.state.currentPage,
      limit: this.props.limit,
    });
    let { code, msg } = res.data;
    if(code !== 0) {
      Message.error(msg.error);
      throw new Error(`code为${code}`);
    }
    let { goodCount, badCount, badList } = msg;
    // todo: should check data input here
    return { goodCount, badCount, badList };
  }

  handlePageChange(page) {
    this.setState({
      currentPage: page
    }, () => {
      this
        .getEquipmentState()
        .then(({goodCount, badCount, badList}) => {
          this.setState({
            totalCount: badCount,
            badList,
          });
        });
    });
  }

  async componentDidMount() {
    let { goodCount, badCount, badList } = await this.getEquipmentState();
    this.setState({
      data: [{
        item: '正常',
        count: goodCount
      }, {
        item: '故障',
        count: badCount,
      }],
      badList,
      totalCount: badCount,
      allCount: goodCount + badCount,
      badCount,
      goodCount,
      __loading: false,
    });
  }

  render() {
    return (
      this.state.__loading ?
        <Loading tip='加载中' />:
        <div style={{ paddingLeft: '2px' }}>
          <Container style={{ marginBottom: '0px', padding: '0 0 20px 0', }}>
            <div style={{ height: '60px', background: '#EAEBEF' }}>
              <div style={
                {
                  float: 'left',
                  fontSize: '20px',
                  fontWeight: 'bold',
                  height: '60px',
                  lineHeight: '60px',
                  paddingLeft: '30px',
                }
              }>
                <Img width={22} height={22} src={require('../../images/equipment.svg')} style={{ display: 'inline', verticalAlign: 'middle' }}/>
                <span style={{ display: 'inline', verticalAlign: 'middle' }}>&nbsp;设备状态</span>
              </div>
              <div style={{
                float: 'right',
                lineHeight: '60px',
                marginRight: '20px',
              }}>
                <Pagination
                  shape='no-border'
                  type="simple"
                  onChange={this.handlePageChange.bind(this)}
                  total={this.state.totalCount}
                  hideOnlyOnePage={true}
                  pageSize={this.props.limit}
                />
              </div>
              <div style={{ clear: 'both' }} />
            </div>
            <div style={styles.content}>
              <ChartPie
                data={this.state.data}
                allCount={this.state.allCount}
                badCount={this.state.badCount}
              />
              {
                this.state.badList.length ?
                  <div style={{ position: 'absolute', top: '20px', zIndex: 100, left: '30px' }}>
                    <div style={{ fontWeight: 'bold', marginBottom: '15px' }} className="hint-title">
                      故障设备列表
                    </div>
                    <ul style={{ listStyle: 'none', display: 'block'}}>
                      {
                        this.state.badList.map((equipment, idx) => {
                          return (
                            <li key={idx} style={{ listStyle: 'none', padding: '5px 0', whiteSpace:'nowrap', fontSize: '12px' }}>
                              {equipment.scope}{equipment.name && `-${equipment.name}`}
                            </li>
                          )
                        })
                      }
                    </ul>
                  </div> : null
              }
            </div>
          </Container>
        </div>
    )
  }
}

export default EquipmentList;

const styles = {
  header: {
    fontSize: 18,
    lineHeight: '32px',
    fontWeight: 700,
    float: 'left',
  },
  content: {
    position: 'relative',
    padding: '0 20px',
  }
};
